<template>
  <div class="grid">
    <!-- <div class="grid-item grid-item-1" style="grid-area: a">1</div>
    <div class="grid-item grid-item-2" style="grid-area: b">2</div>
    <div class="grid-item grid-item-3" style="grid-area: c">3</div>
    <div class="grid-item grid-item-4" style="grid-area: d">4</div>
    <div class="grid-item grid-item-5" style="grid-area: e">5</div>
    <div class="grid-item grid-item-6" style="grid-area: f">6</div>
    <div class="grid-item grid-item-7" style="grid-area: g">7</div> -->
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
    <div class="grid-item grid-item-4">4</div>
    <div class="grid-item grid-item-5">5</div>
    <div class="grid-item grid-item-6">6</div>
    <div class="grid-item grid-item-7">7</div>
  </div>
</template>

<style lang="scss" scoped>
.grid {
  padding: 12px;
  display: grid;
  // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-columns: repeat(3, 1fr);
  // grid-template-areas: 'a b c' 'd d e' 'f f g';
  // grid-auto-rows: auto;
  gap: 12px;
  .grid-item {
    height: 430px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  .grid-item-4 {
    grid-column: 1/3;
  }
  .grid-item-6 {
    grid-column: 1/3;
  }
}
</style>
